<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <title>sliding page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/sliding.css" type="text/css">

    <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <section class="cr-container" id="test">

        <input type="radio" class="cr-selector-img-1" checked/>
        <label class="cr-label-img-1">1</label>

        <input type="radio" class="cr-selector-img-2" />
        <label class="cr-label-img-2">2</label>

        <input type="radio" class="cr-selector-img-3" />
        <label class="cr-label-img-3">3</label>

        <input type="radio" class="cr-selector-img-4" />
        <label class="cr-label-img-4">4</label>

        <div class="clr"></div>
        <div class="cr-bgimg">
            <div>
                <span>Slice 1 - Image 1</span>
                <span>Slice 1 - Image 2</span>
                <span>Slice 1 - Image 3</span>
                <span>Slice 1 - Image 4</span>
            </div>
            <div>
                <span>Slice 2 - Image 1</span>
                <span>Slice 2 - Image 2</span>
                <span>Slice 2 - Image 3</span>
                <span>Slice 2 - Image 4</span>
            </div>
            <div>
                <span>Slice 3 - Image 1</span>
                <span>Slice 3 - Image 2</span>
                <span>Slice 3 - Image 3</span>
                <span>Slice 3 - Image 4</span>
            </div>
            <div>
                <span>Slice 4 - Image 1</span>
                <span>Slice 4 - Image 2</span>
                <span>Slice 4 - Image 3</span>
                <span>Slice 4 - Image 4</span>
            </div>
        </div>
        <!--
        <div class="cr-titles">
            <h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>
            <h3><span>Adventure</span><span>Where the fun begins</span></h3>
            <h3><span>Nature</span><span>Unforgettable eperiences</span></h3>
            <h3><span>Serenity</span><span>When silence touches nature</span></h3>
        </div>
        -->
    </section>

    <script>
        var Ads = function(el, id, adsArr){
            var that = this;
            if(typeof el === 'string'){
                el = '#' + el;
            }
            that.parent = $(el);

            //设置radio的name一致
            that.radioSet = $(el).find('input[type=radio]').attr('name', 'ads-radio-' + id);

            //设置radio的id
            that.radioSet.each(function(i, el){
                $(el).attr('id', 'ads-radio-' + id + i);
                //被点击后重设切换定时器
                el.addEventListener('click', that);
            });
            //设置label的对应id的for属性
            $(el).find('label').each(function(i, el){
                $(el).attr('for', 'ads-radio-' + id + i);
            });
            that.span1 = that.parent.find('.cr-bgimg div span:nth-child(1)');
            that.span2 = that.parent.find('.cr-bgimg div span:nth-child(2)');
            that.span3 = that.parent.find('.cr-bgimg div span:nth-child(3)');
            that.span4 = that.parent.find('.cr-bgimg div span:nth-child(4)');
            that.setImages(adsArr);
            that.resetAutoSlip();

        };

        Ads.prototype = {
            handleEvent: function (e) {
                var that = this;
                switch(e.type) {
                    case 'click':
                        that.resetAutoSlip();
                        break;
                    default :
                        break;
                }
            },

            setImages: function(adsArr){
                if(!adsArr || !adsArr.length || adsArr.length !== 4){
                    return;
                }
                this.span1.css('background-image', 'url(' + adsArr[0] + ')');
                this.span2.css('background-image', 'url(' + adsArr[1] + ')');
                this.span3.css('background-image', 'url(' + adsArr[2] + ')');
                this.span4.css('background-image', 'url(' + adsArr[3] + ')');
            },

            resetAutoSlip: function(){
                var that = this;
                if(that.timer) {
                    clearTimeout(that.timer);
                }
                that.timer = setTimeout(function(){
                    var i = that.parent.find('input[type=radio]:checked').index() / 2;
                    i ++;
                    if(i >= 4){
                        i = 0;
                    }
                    that.radioSet.eq(i).click();
                }, 5000);
            }
        };


        var ads1 = new Ads('test', 'test', ['./img/bootstrap-mdo-sfmoma-01.jpg', './img/bootstrap-mdo-sfmoma-02.jpg', './img/bootstrap-mdo-sfmoma-01.jpg', './img/4.jpg']);
        ads1.setImages(['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg']);
    </script>
</body>
</html>